<template>
  <div class="PublicHolidayPopups">
    <div class="mask">
      <div class="fixedBox">
        <div class="content">
          <div class="top">
            <h3 class="title">公休日设置</h3>
            <div class="close" @click="close">
              <i class="iconfont iconguanbi-01"></i>
            </div>
          </div>
          <div class="main">
            <CheckboxGroup v-model="checkWeeks">
              <Checkbox :label="item.id" v-for="(item,index) in weeks" :key="index">
                <span>{{item.text}}</span>
              </Checkbox>
            </CheckboxGroup>
          </div>
          <div class="bottom">
            <Button class="popupsCancelBtn" @click="close">取消</Button>
            <Button type="info" class="popupsConfirmBtn" @click="confirm">确定</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PublicHolidayPopups",
  props: ["weeks"],
  computed: {
    checkWeeks: {
      get() {
        return this.tempCheckWeeks;
      },
      set(val) {
        this.tempCheckWeeks = val;
      },
    },
  },
  data() {
    return {
      tempCheckWeeks: [], // 选中的值
    };
  },
  mounted() {
    this.weeks.forEach((item, index) => {
      if (item.status === true) {
        this.tempCheckWeeks.push(item.id);
      }
    });
  },
  methods: {
    // 确定
    confirm() {
      this.$emit("confirmPublicHolidayPopups", this.checkWeeks);
    },
    // 关闭弹窗
    close() {
      this.$emit("closePublicHolidayPopups");
    },
  },
};
</script>
<style lang="scss" scoped>
.PublicHolidayPopups {
  position: relative;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba($color: #000000, $alpha: 0.5);
    .fixedBox {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 300px;
      background-color: #fff;
      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .top {
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 48px;
          h3 {
            color: #333;
            font-size: 16px;
            text-indent: 20px;
            font-weight: normal;
          }
          .close {
            width: 64px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            i {
              color: #333;
              font-size: 24px;
            }
          }
          .close:hover {
            background-color: $red;
            i {
              color: #fff;
            }
          }
        }
        .main {
          flex: 1;
          .ivu-checkbox-group {
            padding-top: 50px;
            text-align: center;
          }
        }
        .bottom {
          height: 48px;
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>